{% extends 'base.html' %}

{% block title %}log parser{% endblock %}

{% block head %}
    <style>
        form {margin: 16px 0;}
        #demo {
            padding-left:12px;
            padding-top: 8px;
            /* opacity: 0; */
            /* cursor: default; */
        }
        .upload input {
            width: 1px;
            position: absolute;
            opacity: 0.01;
        }
    </style>
{% endblock %}


{% block body %}
<h2>Upload a scrapy logfile to parse.</h2>
<div class="wrap">
    <form method="post" enctype="multipart/form-data">
        <div class="upload">
            <label class="button warning">
                <input id="file" type="file" name="file" accept=".log, .txt" />
                Select
            </label>

            <span class="filename">a log or txt file</span>

            <a href="javascript:;" class="submit" onclick="uploadLogfile();">
                <i class="iconfont icon-upload"></i>
            </a>
            <a id="demo" class="link" href="{{ url_parse_demo }}">demo</a>
        </div>
    </form>
<div>


<script>
my$('#file').onchange = function () {
    //my$('.filename').innerText = this.value;
    my$('.filename').innerText = "a log or txt file";

    var logfile = my$('#file').files[0];
    if (logfile === undefined) {
        return;
    } else {
        my$('.filename').innerText = logfile.name;
    }
};
</script>
{% endblock %}
